import { action, observable } from "mobx";
import { GamingStore, WordData } from "../../core/store/GamingStore";
import { observer, react, reactor, render } from "../../mobx/observer";


const { ccclass, property } = cc._decorator;
@ccclass
@observer
export default class WordItem extends cc.Component {
    @observable
    wordInfo: WordData;

    @property({ type: cc.Label, tooltip: '文字' })
    lab_word: cc.Label = null;


    _btn: cc.Button;
    onLoad() {
        this.initEvent();
    }
    initEvent() {
        this._btn = this.node.getComponent(cc.Button);
        this._btn.node.on(cc.Node.EventType.TOUCH_START, this.onWordClick, this);
        this._btn.node.on(cc.Node.EventType.TOUCH_END, this.onWordClick, this);
    }
    @action
    onWordClick() {
        if (GamingStore.Ins.isFull) {
            return;
        }
        let noSelected = !this.wordInfo.selected
        if (noSelected) {
            this.wordInfo.selected = true;
        this._btn.node.off(cc.Node.EventType.TOUCH_START, this.onWordClick, this);
            this._btn.node.off(cc.Node.EventType.TOUCH_END, this.onWordClick, this);
            GamingStore.Ins.selectedWords.push(this.wordInfo)
        }
    }

    setData(word: WordData) {
        this.wordInfo = word;
        this.lab_word.string = word.key;
    }

    @render
    renderSelf() {
        this._btn.interactable = !this.wordInfo.selected;
        if (this._btn.interactable) {
            this._btn.node.on(cc.Node.EventType.TOUCH_START, this.onWordClick, this);
            this._btn.node.on(cc.Node.EventType.TOUCH_END, this.onWordClick, this);
        }
    }

}